<template>
  <div class="content-admin">
    <!-- 面板屑导航 -->
    <BreadcrumbNav title="内容管理"></BreadcrumbNav>
    <!-- 卡片区域 -->
    <el-card>
      <!-- 导航区域 -->
      <Search @sendKeywords="handleFilter"></Search>
      <!-- 文章区域 -->
      <div class="weblog-area">
        <WeblogInfo v-for="item in weblogs" :key="item.id" :info="item" @remove="handleRemoveClick"></WeblogInfo>
      </div>
    </el-card>
  </div>
</template>

<script setup>
  import { computed } from "vue"
  import { useStore } from "vuex"
  import BreadcrumbNav from "../../components/breadcrumb-nav/index.vue"
  import WeblogInfo from "./cpns/WeblogInfo.vue"
  import Search from "./cpns/Search.vue"
  import { removeWeblog } from "../../service/api_weblog"
  // 页面数据
  const store = useStore()
  // 网络请求
  const getPageData = () => {
    store.dispatch("weblog/getWeblogsAction")
  }
  getPageData()
  const weblogs = computed(() => store.state.weblog.filterWeblogs)
  // 事件处理
  const handleRemoveClick = (id) => {
    const flag = confirm("确定要删除这篇文章吗?")
    if (!flag) return
    removeWeblog(id).then(res => {
      if (res.status === 200) {
        getPageData()
        ElMessage.success("删除成功!")
      }
    })
  }
  // 事件监听
  const handleFilter = (keywords) => {
    store.commit("weblog/filterWeblogs", keywords)
  }
</script>

<style scoped>
.weblog-area {
  box-sizing: border-box;
}
</style>